import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import StandardTable from '@/components/StandardTable';
import { allDictList } from '@/utils/constans';
import { renderTableAdSelect, codes, caclTotal, getBillVehicleIDetails } from './utils';
import FileReader from '@/components/FileReader';

@connect(({ vehicle, component, loading }) => ({
  vehicle,
  billDetail: vehicle.billDetail,
  vehicleInfoList: vehicle.vehicleInfoList,
  dictObject: component.dictObject,
  loading: loading.effects['vehicle/seleceBillVehicleInfo'],
}))
export default class BillVehicleInfo extends Component {
  state = { infoList: [], id: '' };

  componentDidMount() {
    const { dispatch, billDetail, detailId, type, open } = this.props;
    const details = billDetail[detailId] || {};
    const id = open ? details.id : detailId;
    this.setState({
      id,
    });
    getBillVehicleIDetails(dispatch, id, type, open);
  }

  componentWillReceiveProps(nextProps, nextState) {
    const { detailId, billDetail, open } = nextProps;
    if (
      JSON.stringify(billDetail) !== JSON.stringify(this.props.billDetail) ||
      this.props.detailId !== detailId
    ) {
      const detail = billDetail[detailId];
      if (detailId && detail) {
        this.setState({
          id: detail.id,
        });
        getBillVehicleIDetails(this.props.dispatch, detail.id, detail.type, open);
      }
    }
  }

  //加油
  oilColumns = [
    {
      title: '车牌号',
      dataIndex: 'cartPlate',
    },
    {
      title: '加油量（L）',
      dataIndex: 'oilAmount',
      render: text => <span>{text && text !== 0 ? Number(text).toFixed(2) : text}</span>,
    },
    {
      title: '平均单价',
      dataIndex: 'avgPrice',
      render: text => <span>{text && text !== 0 ? Number(text).toFixed(2) : text}</span>,
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '总金额',
      dataIndex: 'totalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : text}</span>;
      },
    },
  ];
  //维修保养
  upkeepColumns = [
    {
      title: '车牌号',
      dataIndex: 'cartPlate',
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '应付金额',
      dataIndex: 'totalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : 0}</span>;
      },
    },
    {
      title: '实付金额',
      dataIndex: 'realTotalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : 0}</span>;
      },
    },
  ];

  //年审
  verificationColumns = [
    {
      title: '车牌号',
      dataIndex: 'cartPlate',
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '实付金额',
      dataIndex: 'totalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : 0}</span>;
      },
    },
  ];
  //保险
  insuranceColumns = [
    {
      title: '车牌号',
      dataIndex: 'cartPlate',
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '实付金额',
      dataIndex: 'totalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : 0}</span>;
      },
    },
  ];

  //ETC
  etcColumns = [
    {
      title: '车牌号',
      dataIndex: 'cartPlate',
    },
    {
      title: '币种',
      dataIndex: 'currencyType',
      render: text =>
        renderTableAdSelect({
          props: this.props,
          value: text,
          key: allDictList.currencyType,
        }),
    },
    {
      title: '金额',
      dataIndex: 'totalFee',
      render: text => {
        return <span>{text && Number(text) !== 0 ? Number(text).toFixed(2) : 0}</span>;
      },
    },
  ];

  getColumnByType = () => {
    const { type } = this.props;
    let columns = [];
    switch (type) {
      case 'OIL':
        columns = this.oilColumns;
        break;
      case 'INSURANCE':
        columns = this.insuranceColumns;
        break;
      case 'ANNUALAUDIT':
        columns = this.verificationColumns;
        break;
      case 'UPKEEP':
        columns = this.upkeepColumns;
        break;
      case 'ETCCHANGE':
        columns = this.etcColumns;
        break;
      default:
        break;
    }
    return columns;
  };

  render() {
    const { vehicleInfoList, loading, type, detailId } = this.props;
    const { id } = this.state;

    return (
      <Fragment>
        <StandardTable
          disabledRowSelected={true}
          loading={loading}
          data={vehicleInfoList[id] || {}}
          columns={this.getColumnByType()}
          scrollX={450}
          pagination={false}
          scrollY={200}
          className="table_info_total"
        />
      </Fragment>
    );
  }
}
